<template>
  <div class="total">
    <div class="tab">
      <div :class="[active == 0 ? 'active' : 'normal']" @click="checktab(0)">
        基本数据
      </div>
      <div :class="[active == 1 ? 'active' : 'normal']" @click="checktab(1)">
        规上工业产值
      </div>
      <div :class="[active == 2 ? 'active' : 'normal']" @click="checktab(2)">
        固定资产投资
      </div>
      <div :class="[active == 3 ? 'active' : 'normal']" @click="checktab(3)">
        全口径财政收入
      </div>
      <div :class="[active == 4 ? 'active' : 'normal']" @click="checktab(4)">
        地方级财政收入
      </div>
      <div :class="[active == 5 ? 'active' : 'normal']" @click="checktab(5)">
        工业用地量
      </div>
      <div :class="[active == 6 ? 'active' : 'normal']" @click="checktab(6)">
        工业用电量
      </div>
    </div>
    <div v-if="active == 0">
      <table class="table" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th style="letter-spacing: 0.7vw; width: 20%">名称</th>
            <th style="width: 20%">2021年</th>
            <th style="width: 20%">2022年1-{{month}}月</th>
            <th style="letter-spacing: 0.7vw; width: 20%">半年</th>
            <th style="letter-spacing: 0.7vw; width: 20%">全年</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">规上工业产值</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gsgy?.year?.lastYear?.titleValue)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gsgy?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gsgy?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gsgy?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.gsgy?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.gsgy?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gsgy?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gsgy?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">固定资产投资</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gdzc?.year?.lastYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gdzc?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gdzc?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gdzc?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.gdzc?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.gdzc?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gdzc?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gdzc?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">全口径财政收入</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.qgkj?.year?.lastYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.qgkj?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.qgkj?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.qgkj?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.qgkj?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.qgkj?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.qgkj?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.qgkj?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">地方级财政收入</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.dfj?.year?.lastYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.dfj?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.dfj?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.dfj?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.dfj?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.dfj?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.dfj?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.dfj?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">工业用地量</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gyyd?.year?.lastYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gyyd?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gyyd?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gyyd?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.gyyd?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.gyyd?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.gyyd?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.gyyd?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
          <tr>
            <td>
              <span style="fontsize: 1.2vw; fontweight: 510">工业用电量</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.ydl?.year?.lastYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.ydl?.year?.lastYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.ydl?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.ydl?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(halfYear.ydl?.half_year?.upYear?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(halfYear.ydl?.half_year?.upYear?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
            <td>
              <span>{{parseFloat(DataTable2.ydl?.year?.nowYear?.titleValue).toFixed(2)}}</span>&nbsp;&nbsp;
              <span>{{(parseFloat(DataTable2.ydl?.year?.nowYear?.percentage)*100).toFixed(2)}}%</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-if="active == 1">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="
                  width: 70%;
                  background-color: rgb(2, 133, 190);color: #fff;height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gsgy?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gsgy?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>
              {{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%
            </td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gsgy?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gsgy?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>
              {{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%
            </td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gsgy?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.gsgy?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.gsgy?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>
              {{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%
            </td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
    <div v-if="active == 2">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="width: 70%;
                  background-color: rgb(2, 133, 190);
                  color: #fff;
                  height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gdzc?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gdzc?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gdzc?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gdzc?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gdzc?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.gdzc?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.gdzc?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>{{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%</td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
    <div v-if="active == 3">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="
                  width: 70%;
                  background-color: rgb(2, 133, 190);
                  color: #fff;
                  height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.qgkj?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.qgkj?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.qgkj?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.qgkj?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.qgkj?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.qgkj?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.qgkj?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>{{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%</td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
    <div v-if="active == 4">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="
                  width: 70%;
                  background-color: rgb(2, 133, 190);
                  color: #fff;
                  height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.dfj?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.dfj?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.dfj?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.dfj?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.dfj?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.dfj?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.dfj?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>{{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%</td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
    <div v-if="active == 5">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="
                  width: 70%;
                  background-color: rgb(2, 133, 190);
                  color: #fff;
                  height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gyyd?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gyyd?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gyyd?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.gyyd?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.gyyd?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.gyyd?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.gyyd?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>{{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%</td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
    <div v-if="active == 6">
      <table class="table1" border="0" cellspacing="0" cellpadding="0" border-collapse="collapse">
        <thead>
          <tr>
            <th></th>
            <th>1月</th>
            <th>2月</th>
            <th>3月</th>
            <th>4月</th>
            <th>5月</th>
            <th>6月</th>
            <th>7月</th>
            <th>8月</th>
            <th>9月</th>
            <th>10月</th>
            <th>11月</th>
            <th>12月</th>
            <th>
              <select name="selectList" @change="screen" style="
                  width: 70%;
                  background-color: rgb(2, 133, 190);
                  color: #fff;
                  height: 3vh;
                ">
                <option v-for="item,index of year" :key="index" :value="index">{{item}}</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>2020年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.ydl?.month?.titleValue[item]?.twoYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.ydl?.month?.titleValue[item]?.twoYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.twoYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.twoYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2021年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.ydl?.month?.titleValue[item]?.oneYear?.titleValue }}亿&nbsp;&nbsp;
              {{ parseFloat((DataTable1?.ydl?.month?.titleValue[item]?.oneYear?.percentage)*100).toFixed(2) }}%
            </td>
            <td>{{quarter?.lastYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.lastYear?.percentage)*100).toFixed(2)}}%</td>
          </tr>
          <tr>
            <td>2022年</td>
            <td v-for="item,index of obj" :key="index">
              {{ DataTable1?.ydl?.month?.titleValue[item]?.nowYear?.titleValue }}亿&nbsp;&nbsp;
              <span
                v-if="parseFloat((DataTable1?.ydl?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2)==='NaN'">
                0%
              </span>
              <span v-else>
                {{ parseFloat((DataTable1?.ydl?.month?.titleValue[item]?.nowYear?.percentage)*100).toFixed(2) }}%
              </span>
            </td>
            <td>{{quarter?.nowYear?.titleValue}}&nbsp;&nbsp;
              {{parseFloat((quarter?.nowYear?.titleValue)*100).toFixed(2)}}%</td>
          </tr>
        </tbody>
      </table>

      <div style="position: relative">
        <div id="main1" style="height: 50vh; width: 80vw"></div>
        <select name="timesel" class="selone">
          <option>按月</option>
        </select>
        <select name="timesel" class="seltwo" @change="changeecharts">
          <option value="0">柱形</option>
          <option value="1">条形</option>
        </select>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, getCurrentInstance, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { GetData } from "@/api";
let arr2020 = ref([])
let arr2021 = ref([])
let arr2022 = ref([])

// 月份
let month = ref('')

// 获取当前月份
const getDate = ()=>{
  let nowDate = new Date()
  month.value = nowDate.getMonth()+1
  console.log(month.value,123123123);
}

const { proxy } = getCurrentInstance()
const arr1 = ref(["gsgy", "gdzc", "qgkj", "dfj", "gyyd", "ydl"])
const year = ref(['全年', '半年', '一季度', '二季度', '三季度', '四季度'])
const active = ref(0);
const index = ref(0)
const checktab = (val) => {
  index.value = val - 1
  console.log(index.value);
  GetDataTable()

  active.value = val;
  if (active.value != 0) {
    getYera()
    nextTick(() => {
      echarts.init(document.getElementById("main1")).dispose();
      var myChart = echarts.init(document.getElementById("main1"));
      myChart.setOption(option);
    });
  }
};
var colors = [
  {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#218bd1",
      },
      {
        offset: 0.5,
        color: "#7EC3F0",
      },
      {
        offset: 0.5,
        color: "#1985cd",
      },
      {
        offset: 1,
        color: "#1985cd",
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#6DD4E5",
      },
      {
        offset: 0.5,
        color: "#6DD4E5",
      },
      {
        offset: 0.5,
        color: "#0EADC9",
      },
      {
        offset: 1,
        color: "#218bd1",
      },
    ],
  },
  {
    type: "linear",
    x: 0,
    x2: 1,
    y: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: "#acace6",
      },
      {
        offset: 0.5,
        color: "#acace6",
      },
      {
        offset: 0.5,
        color: "#6161bd",
      },
      {
        offset: 1,
        color: "#6161bd",
      },
    ],
  },
];
var barWidth = 30;
var option = {
  xAxis: {
    type: 'category',
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  legend: {
    data: ["2020年", "2021年", "2022年"],
    orient: "vertical",
    right: 250,
    top: 0,
  },
  yAxis: {},
  series: [
    {
      z: 1,
      name: "2020年",
      type: "bar",
      barWidth: barWidth,
      label: {
        show: true,
        position: 'top',
        formatter: function (value) {
          return `${value.data.value}\n${value.data.percentage}%`
        }
      },
      data: arr2020.value,
      itemStyle: {
        normal: {
          color: colors[0],
        },
      },

    },
    {
      z: 1,
      name: "2021年",
      type: "bar",
      barWidth: barWidth,
      label: {
        show: true,
        position: 'top',
        formatter: function (value) {
          return `${value.data.value}\n${value.data.percentage}%`
        }
      },
      data: arr2021.value,
      itemStyle: {
        normal: {
          color: colors[1],
        },
      },
    },
    {
      z: 1,
      type: "bar",
      name: "2022年",
      barWidth: barWidth,
      label: {
        show: true,
        position: 'top',
        formatter: function (value) {
          return `${value.data.value}\n${value.data.percentage}%`
        }
      },
      data: arr2022.value,
      itemStyle: {
        normal: {
          color: colors[2],
        },
      },
    },
  ],
};
const quarter = ref([])
const screen = async (e) => {
  console.log(e.target.value);
  if (e.target.value < 2) {
    if (e.target.value == 0) {
      const res = await GetData('getDateTable?type=YEAR&year=2022')
      quarter.value = res[arr1.value[index.value]].year
    } else {
      const res = await GetData('/getDateTable?type=HALF_YEAR&year=2022')
      quarter.value = res[arr1.value[index.value]].half_year.upYear
      console.log(quarter.value);
    }
  } else {
    const res = await GetData('/getDateTable?type=QUARTER&year=2022')
    if (e.target.value == 2) {
      quarter.value = res[arr1.value[index.value]]?.quarter?.one
    } else if (e.target.value == 3) {
      quarter.value = res[arr1.value[index.value]]?.quarter?.two
    } else if (e.target.value == 4) {
      quarter.value = res[arr1.value[index.value]]?.quarter?.three
    } else if (e.target.value == 5) {
      quarter.value = res[arr1.value[index.value]]?.quarter?.four
    }
  }
}

var category = [
  "1月",
  "2月",
  "3月",
  "4月",
  "5月",
  "6月",
  "7月",
  "8月",
  "9月",
  "10月",
  "11月",
  "12月",
];
var dottedBase = [];
var lineData = [];
var lineData2 = [];
var lineData3 = [];
// 封装折线图
const zxt = () => {
  var option1 = {
    title: {
      text: "",
      x: "center",
      y: 0,
      textStyle: {
        color: "#B4B4B4",
        fontSize: 16,
        fontWeight: "normal",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(255,255,255,0.1)",
      axisPointer: {
        type: "shadow",
        label: {
          show: true,
          backgroundColor: "#7B7DDC",
          dataset: {
            source: [
              ['Matcha Latte', 43.3, 85.8, 93.7],
              ['Milk Tea', 83.1, 73.4, 55.1],
              ['Cheese Cocoa', 86.4, 65.2, 82.5],
              ['Walnut Brownie', 72.4, 53.9, 39.1]
            ]
          }
        },
      },
    },
    grid: {
      width: "85%",
      left: "10%",
      bottom: "10%",
    },
    xAxis: {
      data: category,
      axisLine: {
        lineStyle: {
          color: "#B4B4B4",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: '#55b9b4'
        }
      }
    },
    yAxis: [
      {
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#55b9b4'
          }
        },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
      },
      {
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: "#B4B4B4",
          },
        },
      },
    ],

    series: [
      {
        name: "2020年",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: "#F02FC2",
          },
        },
        data: lineData,
        label: {
          show: true,
          position: "right",
          // formatter: '2020年',
          formatter: function (params) {
            if (params.name == "12月") {
              return "2020年";
            } else {
              return "";
            }
          },
        },
      },

      {
        name: "2021年",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: "#8A64B8",
          },
        },
        data: lineData2,
        label: {
          show: true,
          position: "right",
          // formatter: '2020年',
          formatter: function (params) {
            if (params.name == "12月") {
              return "2021年";
            } else {
              return "";
            }
          },
        },
      },

      {
        name: "2022年",
        type: "line",
        smooth: true,
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 8,
        yAxisIndex: 0,
        itemStyle: {
          normal: {
            color: "#3188c2",
          },
        },
        data: lineData3,
        label: {
          show: true,
          position: "right",
          // formatter: '2020年',
          formatter: function (params) {
            if (params.name == "12月") {
              return "2022年";
            } else {
              return "";
            }
          },
        },
      },
    ],
  };
  echarts.init(document.getElementById("main1")).dispose();
  var myChart = echarts.init(document.getElementById("main1"));
  myChart.setOption(option1);
}
const changeecharts = (e) => {
  if (e.target.value == 0) {
    initEchart(option)
  } else if (e.target.value == 1) {
    zxt()
  }
};

const initEchart = (option) => {
  echarts.init(document.getElementById("main1")).dispose();
  var myChart = echarts.init(document.getElementById("main1"));
  myChart.setOption(option);
}

// 数据产值表格
const DataTable = ref([])
const DataTable1 = ref([])
const DataTable2 = ref([])
let obj = ref({
  1: "one",
  2: "two",
  3: "three",
  4: "four",
  5: "five",
  6: "six",
  7: "seven",
  8: "eight",
  9: "nine",
  10: "ten",
  11: "eleven",
  12: "twelve",
});

const getData = async () => {
  const res1 = await proxy.http.get('/getDateTable?year=' + 2022)
  const res2 = await proxy.http.get('/getDateTable?type=YEAR&year=' + 2022)
  const res = await proxy.http.get('/getTypeList?type=CZ')
  DataTable.value = res
  DataTable1.value = res1
  DataTable2.value = res2

}
const halfYear = ref([])
const getYera = async () => {
  const res = await GetData('/getDateTable?type=YEAR&year=2022')
  const res2 = await proxy.http.get('/getDateTable?type=HALF_YEAR&year=' + 2022)
  quarter.value = res[arr1.value[index.value]].year
  halfYear.value = res2
  console.log(halfYear.value, 99999999);
}
// 获取数据产值表格
const GetDataTable = async () => {
  const arr = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve"]
  const datas = DataTable1?.value[arr1.value[index.value]]?.month?.titleValue
  if (datas) {
    lineData = []
    lineData2 = []
    lineData3 = []
    option.series.forEach(item1 => {
      // item1.data = []
      arr.forEach(item => {
        if (item1.name == '2020年' || item1.name == '左上部1' || item1.name == '左上部2') {
          arr2020.value.push({ value: (parseFloat(datas[item]?.twoYear?.titleValue)).toFixed(0), percentage: (parseFloat(datas[item]?.twoYear?.percentage) * 100).toFixed(0) })

        }
        else if (item1.name == '2021年' || item1.name == '中上部1' || item1.name == '中上部2') {
          arr2021.value.push({ value: (parseFloat(datas[item]?.oneYear?.titleValue)).toFixed(0), percentage: (parseFloat(datas[item]?.oneYear?.percentage) * 100).toFixed(0) })
        }
        else if (item1.name == '2022年' || item1.name == '右上部1' || item1.name == '右上部2') {
          arr2022.value.push({ value: (parseFloat(datas[item]?.nowYear?.titleValue)).toFixed(0), percentage: (parseFloat(datas[item]?.nowYear?.percentage) * 100).toFixed(0) })
        }
      })
    })
    arr.forEach(item => {
      lineData.push(Number(datas[item].twoYear?.titleValue))
      lineData2.push(Number(datas[item].oneYear?.titleValue))
      lineData3.push(Number(datas[item].nowYear?.titleValue))
    })
  } else {
    option.series.forEach(item1 => { item1.data = [] })
    lineData = []
    lineData2 = []
    lineData3 = []
  }
  console.log(arr2020.value, 'arr2020');
}
onMounted(() => {
  getData()
  getYera()
  getDate()
})
onBeforeUnmount(() => {
  echarts.init(document.getElementById("main1")).dispose();
})
</script>
<style scoped>
.tab {
  display: flex;
}

.normal {
  width: 14%;
  height: 5vh;
  border: 1px solid rgb(97, 167, 204);
  text-align: center;
  line-height: 5vh;
  background: url("../assets/imgs/normal.png") no-repeat;
  background-position: 100% 20%;
  /* background-color: rgb(218, 231, 238); */
  color: rgb(21, 54, 99);
}

.active {
  width: 14%;
  height: 5vh;
  border: 1px solid rgb(97, 167, 204);
  text-align: center;
  line-height: 5vh;
  background: url("../assets/imgs/active.png") no-repeat;
  background-position: 100% 20%;
  /* background-color: rgb(45, 105, 148); */
  color: #fff;
}

.table {
  width: 96%;
  margin-top: 5vh;
  border: 1px solid rgb(142, 188, 219);
  border-radius: 5px;
}

.table thead {
  height: 9vh;
}

.table thead tr th {
  background: url("../assets/imgs/tablehead.png") no-repeat;
  /* background-position: cover; */
  /* background-position: 98% 96%; */
  background-position: center center;
  background-size: cover;
  color: #fff;
  font-size: 1vw;
}

.table tbody tr {
  height: 9vh;
}

.table tbody tr td {
  text-align: center;
  color: rgb(37, 97, 147);
  border-bottom: 2px solid rgb(225, 225, 225);
}

.table1 {
  width: 99%;
  margin-top: 5vh;
  border: 1px solid rgb(142, 188, 219);
  border-radius: 5px;
}

.table1 thead {
  height: 5vh;
}

.table1 thead tr th {
  width: 80px;
  /* background-color: rgb(51, 118, 168);
  border: 2px solid rgb(105, 181, 216); */
  background: url("../assets/imgs/active.png") no-repeat;
  /* background-position: cover; */
  background-position: 98% 20%;
  color: #fff;
}

.table1 tbody tr {
  height: 5vh;
  font-size: 0.6vw;
}

.table1 tbody tr td {
  text-align: center;
  color: rgb(37, 97, 147);
  border-bottom: 2px solid rgb(225, 225, 225);
  border-right: 2px solid rgb(142, 188, 219);
}

#main1 {
  margin-top: 2vh;
  /* position: relative; */
}

.selone {
  width: 4vw;
  height: 3vh;
  text-align: center;
  position: absolute;
  right: 15%;
  top: 0;
  background-color: rgb(2, 133, 190);
  letter-spacing: 0.3vw;
  color: #fff;
}

.seltwo {
  width: 4vw;
  height: 3vh;
  position: absolute;
  right: 10%;
  top: 0;
  background-color: rgb(2, 133, 190);
  letter-spacing: 0.3vw;
  color: #fff;
  text-align: center;
}
</style>